<?php get_header(); ?>

<script>
  $(document).ready(function(){
    var w = $(window).width();
    $('.section').css('width', w+'px');
    
    var total = w*5;
    $('body').css('width', total+'px');
  });

  $(document).resize(function(){
    var w = $(window).width();
    $('.section').css('width', w+'px');
    
    var total = w*5;
    $('body').css('width', total+'px');
  });
</script>

<div class="section" id="home">
  <div class="wrapper">
    <div class="top"></div>
    <div class="middle">
      <div class="slogan">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
        <h3><?php bloginfo('name'); ?></h3>
        <p><?php bloginfo('description'); ?></p>
      </div>
    </div>
    <div class="bottom menu">
      <ul>
        <li><a href="<?php bloginfo('url'); ?>/category/news">NEWS</a></li>
        <li><a href="#about_us">ABOUT US</a></li>
        <li><a href="#heavy_machine">HEAVY MACHINE</a></li>
        <li><a href="#projects">PROJECTS</a></li>
        <li><a href="<?php bloginfo('url'); ?>/category/gallery">GALLERY</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
    
    <div id="footer">Copyright 2012  PT. Asia Putra Cemerlang.  design by visualcast designology</div>
  </div>
</div>

<!--about us-->
<script>
  $(document).ready(function(){
    $('#about_us .content2 .element').columnize({height:110});
    
    var w_element = 630;
    var total = Math.ceil($('#about_us .content2 .element .column').length/2);
    var now = 1;
    
    $('#about_us .navi_slideshow .page_num').html(now+'/'+total);
    
    $('#about_us .navi_slideshow .next').click(function(){
      if(now < total){
        $('#about_us .content2 .element').animate({
          left: '-='+w_element
        });
        now++;
        
        $('#about_us .navi_slideshow .page_num').html(now+'/'+total);
      }
    });
    
    $('#about_us .navi_slideshow .prev').click(function(){
      if(now > 1){
        $('#about_us .content2 .element').animate({
          left: '+='+w_element
        });
        now--;
        
        $('#about_us .navi_slideshow .page_num').html(now+'/'+total);
      }
    });
    
    // email validation
    var mail = new LiveValidation('mail');
    mail.add( Validate.Email );
  });
</script>

<div class="section" id="about_us">
  <div class="wrapper">
    <div class="header-content">
      <div class="slogan">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
        <h3><?php bloginfo('name'); ?></h3>
        <p><?php bloginfo('description'); ?></p>
      </div>
      
      <div class="menu">
        <a href="#home" class="fr">HOME</a>
        <ul>
          <li><a href="<?php bloginfo('url'); ?>/category/news">NEWS</a></li>
          <li class="active"><a href="#about_us">ABOUT US</a></li>
          <li><a href="#heavy_machine">HEAVY MACHINE</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="<?php bloginfo('url'); ?>/category/gallery">GALLERY</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
    
    <div class="content1">
      <h4>Berdiri semenjak Februari 1994 yang pada awalnya hanya berfokus memenuhi kebutuhan rental alat-alat berat untuk berbagai proyek konstruksi di Surabaya yang terkenal berkembang pesat.</h4>
      <h2>OUR STORY</h2>
    </div>
    <?php 
      $id = 34;
      $post = get_post($id);
      $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    ?>
    <div class="content2">
      <div class="container">
        <div class="element">
          <?php echo $post->post_content; ?>
        </div>
      </div>
      
      <div class="navi_slideshow">
        <div class="btn prev"></div>
        <div class="page_num"></div>
        <div class="btn next"></div>
      </div>
      
      <div class="feat_image">
        <img src="<?php echo $feat_image ?>" />
      </div>
    </div>
    <div class="content3"></div>
    
    <div id="footer">Copyright 2012  PT. Asia Putra Cemerlang.  design by visualcast designology</div>
  </div>
</div>

<!--heavy machine-->
<script>
  $(document).ready(function(){   
    $("#heavy_machine .content3 span:nth-last-child(1)").remove();
    $('#hpopup .hp-content').jScrollPane();
    
    $('#heavy_machine .list_popup').click(function(e){
      e.stopPropagation();
      $('#hpopup').css('z-index', '100');
      $('#hpopup').animate({ opacity: 1 });
      
      $('body').prepend('<div id="hpopup_overlay"></div>');
    });
    
    $(document).click(function(){
      $('#hpopup').animate({ opacity: 0 });
      $('#hpopup').css('z-index', '-999');
      
      $('#hpopup_overlay').remove();
    });
  });
</script>

<div class="section" id="heavy_machine">
  <div class="wrapper">
    <div class="header-content">
      <div class="slogan">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
        <h3><?php bloginfo('name'); ?></h3>
        <p><?php bloginfo('description'); ?></p>
      </div>
      
      <div class="menu">
        <a href="#home" class="fr">HOME</a>
        <ul>
          <li><a href="<?php bloginfo('url'); ?>/category/news">NEWS</a></li>
          <li><a href="#about_us">ABOUT US</a></li>
          <li class="active"><a href="#heavy_machine">HEAVY MACHINE</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="<?php bloginfo('url'); ?>/category/gallery">GALLERY</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
    
    <div class="content1">
      <h2>EQUIPMENT</h2>
    </div>
    
    <?php
      $id = 55;
      $post = get_post($id);
      $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    ?>
    
    <div class="content2">
      <div class="featured_img">
        <img src="<?php echo $feat_image; ?>" />
      </div>
      <div class="description">
        <p>Alat-alat berat dengan teknologi dan kualitas yang baik adalah yang kami tawarkan. Bukan saja berbagai fleet dari produsen terjamin, tetapi juga varian alat berat yang kami miliki cukup lengkap sehingga mampu memberikan berbagai solusi untuk berbagai masalah lapangan Anda.</p>
        
        <?php  
          $val = get_field('hide_list', 55);
          if($val == 'no'){
        ?>
        <a class="list_popup">List lengkap alat berat <span></span></a>
        <?php } ?>
      </div>
    </div>
    
    <div class="content3">
      <p><?php echo str_replace("</p>", "<span>&nbsp;</span>", str_replace("<p>", "", $post->post_content)) ?></p>
    </div>
    
    <div id="footer">Copyright 2012  PT. Asia Putra Cemerlang.  design by visualcast designology</div>
    
    <!--popup-->
    <div id="hpopup" class="popup">
      <div class="hp-header">
        <h2>EQUIPMENTS LIST</h2>
      </div>
      <div class="hp-content-container">
        <div class="hp-content">
          <?php echo $post->post_content; ?>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- projects -->
<script>
  $(document).ready(function(){
    // client menu category
    $('#projects .clients .clients-category a:nth-child(1)').addClass('active');
    
    // calculate width
    var w_element = 550;
    var n = $('#projects .client-data').length;
    $('#projects .clients-category-data').css('width', (w_element*n)+'px');
    $('#projects .clients-category-data:nth-child(1)').css('display', 'block');
    
    $('#projects .clients-quickmenu ul li:nth-child(1)').addClass('active');
    $('#projects .content2 .clients-quickmenu ul:nth-child(1)').css('display', 'block');
    
    // category menu event
    $('#projects .clients-category a').click(function(){
      $('#projects .clients-category a').removeClass('active');
      $(this).addClass('active');
      $('#projects .clients-category-data').css('display', 'none');
      $('#projects .content2 .clients-quickmenu ul').css('display', 'none');
      
      var tmp = $(this).attr('alt');
      $('#'+tmp).fadeIn('fast');
      $('#quickmenu-'+tmp).css('display', 'block');
    });
    
    // quickmenu event
    // var now_in = 0;
    $('#projects .clients-quickmenu ul li').click(function(){
      var before = $('#projects .clients-quickmenu ul li.active').index();
      now_in = $($(this).attr('alt')).index();
    
      $('#projects .clients-quickmenu ul li').removeClass('active');
      $(this).addClass('active');
      
      var anchor = $(this);
      $('#projects .clients-category-data').animate({
          left: '-='+((now_in-before)*w_element)
      }, 1000);
    });
  });
</script>

<div class="section" id="projects">
  <div class="wrapper">
    <div class="header-content">
      <div class="slogan">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
        <h3><?php bloginfo('name'); ?></h3>
        <p><?php bloginfo('description'); ?></p>
      </div>
      
      <div class="menu">
        <a href="#home" class="fr">HOME</a>
        <ul>
          <li><a href="<?php bloginfo('url'); ?>/category/news">NEWS</a></li>
          <li><a href="#about_us">ABOUT US</a></li>
          <li><a href="#heavy_machine">HEAVY MACHINE</a></li>
          <li class="active"><a href="#projects">PROJECTS</a></li>
          <li><a href="<?php bloginfo('url'); ?>/category/gallery">GALLERY</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </div>
    </div>
    
    <div class="content1">
      <h2>PROJECTS & CLIENTS</h2>
    </div>
    <?php
      $id = 43;
      $post = get_post($id);
      $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    ?>
    <div class="content2">
      <div class="featured_image">
        <img src="<?php echo $feat_image; ?>" />
      </div>
      
      <div class="description"><?php echo $post->post_content; ?></div>
      
      <div class="clients">
        <?php
          $args = array(
            'child_of'                 => 4,
            'orderby'                  => 'name',
            'order'                    => 'ASC',
            'hide_empty'               => 0,
          );
          $categories = get_categories($args);
        ?>
        <div class="clients-category">
          <?php foreach($categories as $category){ ?>
            <a alt="<?php echo $category->slug; ?>"><?php echo $category->name; ?> CLIENTS</a>
          <?php } ?>
        </div>
        <div class="client-lists">
          <?php 
            foreach($categories as $category){ 
            
            $args = array(
              'numberposts'     => -1,
              'category'        => $category->cat_ID,
              'orderby'         => 'post_date',
              'order'           => 'DESC',
            );
            
            $posts = get_posts($args);
          ?>
            <div id="<?php echo $category->slug; ?>" class="clients-category-data">
              <?php foreach($posts as $post){ ?>
                <div id="<?php echo $post->post_name; ?>" class="client-data">
                  <p class="name"><?php echo $post->post_title; ?></p>
                  <p class="short-description"><?php echo strip_tags($post->post_content); ?></p>
                </div>
              <?php } ?>
            </div>
          <?php } ?>
        </div>
        <div class="clients-quickmenu">
          <?php 
            foreach($categories as $category){ 
            
            $args = array(
              'numberposts'     => -1,
              'category'        => $category->cat_ID,
              'orderby'         => 'post_date',
              'order'           => 'DESC',
            );
            
            $posts = get_posts($args);
          ?>
            <ul id="quickmenu-<?php echo $category->slug; ?>">
              <?php foreach($posts as $post){ ?>
                <li alt="#<?php echo $post->post_name ?>"></li>
              <?php } ?>
            </ul>
          <?php } ?>
        </div>
      </div>
    </div>
    <div class="content3"></div>
    
    <div id="footer">Copyright 2012  PT. Asia Putra Cemerlang.  design by visualcast designology</div>
  </div>
</div>

<!-- Contact us -->
<script>
  $(document).ready(function(){
    $('#contact .mail input').attr('placeholder', 'Mail');
    $('#contact .subject input').attr('placeholder', 'Subject');
    
    $('#contact .next').click(function(){
      // change city
      $('#contact .left a').removeClass('active');
      $('#contact .left a:nth-child(3)').addClass('active');
    
      // change content
      $('#contact .content2 .container').animate({
        left: '-=550'
      });
      
      $('#contact .next').css('display', 'none');
      $('#contact .prev').css('display', 'block');
    });
    
    $('#contact .prev').click(function(){
      // change city
      $('#contact .left a').removeClass('active');
      $('#contact .left a:nth-child(2)').addClass('active');
    
      // change content
      $('#contact .content2 .container').animate({
        left: '+=550'
      });
      
      $('#contact .next').css('display', 'block');
      $('#contact .prev').css('display', 'none');
    });
    
    $('#contact .left a:nth-child(2)').click(function(){
      if($(this).hasClass('active') == false){
        $('#contact .prev').trigger('click');
      }
    });
    
    $('#contact .left a:nth-child(3)').click(function(){
      if($(this).hasClass('active') == false){
        $('#contact .next').trigger('click');
      }
    });
  });
</script>

<div class="section" id="contact">
  <div class="wrapper">
    <div class="header-content">
      <div class="slogan">
        <img src="<?php bloginfo('template_url'); ?>/images/logo.png" />
        <h3><?php bloginfo('name'); ?></h3>
        <p><?php bloginfo('description'); ?></p>
      </div>
      
      <div class="menu">
        <a href="#home" class="fr">HOME</a>
        <ul>
          <li><a href="<?php bloginfo('url'); ?>/category/news">NEWS</a></li>
          <li><a href="#about_us">ABOUT US</a></li>
          <li><a href="#heavy_machine">HEAVY MACHINE</a></li>
          <li><a href="#projects">PROJECTS</a></li>
          <li><a href="<?php bloginfo('url'); ?>/category/gallery">GALLERY</a></li>
          <li class="active"><a href="#contact">CONTACT</a></li>
        </ul>
      </div>
      
    </div>
    <div class="content1"></div>
    <div class="content2">
      <div class="left">
        <h2>CONTACT US</h2>
        <a class="active" alt="">SURABAYA</a>
        <a alt="">KALIMANTAN</a>
      </div>
      
      <a class="next"></a>
      <a class="prev" style="display: none;"></a>
      
      <div class="right">
        <div class="container">
          <div class="element">
            <p><b>OFFICE</b>:  Jl. Margomulyo 44 Blok B No. 5 - 6. Kompleks Industri Surimulya.  Surabaya - Indonesia. <b>PHONE</b>: 031 7490800 - 7490015 - 7490016.  <b>FAX</b>: 031 7493672.</p>
          </div>
          <div class="element">
            <p><b>OFFICE</b>:  Jl. Margomulyo 44 Blok B No. 5 - 6. Kompleks Industri Surimulya.  Surabaya - Indonesia. <b>PHONE</b>: 031 7490800 - 7490015 - 7490016.  <b>FAX</b>: 031 7493672.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="contact-form">
      <?php echo do_shortcode('[contact-form-7 id="4" title="Contact form 1"]'); ?>
    </div>
    
    <div id="footer">Copyright 2012  PT. Asia Putra Cemerlang.  design by visualcast designology</div>
  </div>
</div>

<?php get_footer(); ?>
